<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      style="margin-top: 50px; margin-left: 40px"
    >
      <el-form-item>
        <el-upload :before-upload="updateImg">
          <el-avatar :size="100" :src="form.avatar"></el-avatar>
        </el-upload>
      </el-form-item>
      <el-form-item label="登录账号" style="width: 400px">
        <el-input v-model="form.loginName" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户昵称" style="width: 400px">
        <el-input v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="所属部门" style="width: 400px">
        <el-input v-model="form.deptName" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱" style="width: 400px">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" style="width: 400px">
        <el-input v-model="form.phonenumber"></el-input>
      </el-form-item>
      <el-form-item label="用户性别">
        <el-select v-model="form.sex" placeholder="男">
          <el-option label="男" value="0"></el-option>
          <el-option label="女" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button type="danger">注销</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import { uploadImg, getUserInfo, updateUserInfo } from '@/api/user';
import { mutations } from '@/store/modules/user';
export default {
  data() {
    return {
      form: {
        loginName: '',
        userName: '',
        deptName: '',
        avatar:
          'http://127.0.0.1:8080/img/1276d63d-db4e-4dd1-ab38-a1b36f13e016.png',
        email: '',
        phonenumber: '',
        sex: '',
        userId: '',
      },
    };
  },
  created() {
    const tonek = getToken();
    getUserInfo(tonek).then((resp) => {
      this.form.avatar = resp.data.avatar;
      this.form.loginName = resp.data.loginName;
      this.form.userName = resp.data.userName;
      this.form.deptName = resp.data.deptName;
      this.form.email = resp.data.email;
      this.form.phonenumber = resp.data.phonenumber;
      this.form.sex = resp.data.sex;
      this.form.userId = resp.data.userId;
    });
  },
  methods: {
    onSubmit() {
      updateUserInfo(this.form).then((resp) => {
        this.$message({
          message: '修改信息成功',
          type: 'success',
        });
      });
      // 替换头像
      this.$store.commit('user/SET_AVATAR', this.form.avatar);
      this.$router.push('/');
    },
    updateImg(file) {
      const formData = new FormData();
      formData.append('file', file);

      uploadImg(formData).then((resp) => {
        console.log(resp.data);
        this.form.avatar = resp.data;
      });
    },

    getUser() {},
  },
};
</script>
